<template>
    <div class="container-wrapper">
        <div class="account-wrapper">
            <div class="warn-wrapper" v-show="showWarning && from != 0">
                <i class="iconfont icon-remand warn-txt iconfont"></i>
                <span class="warn-txt">账户余额少于广告预算，为了不影响您的广告正常投放，请到Facebook平台上进行充值。</span>
            </div>
            <div class="account">
                <!--<div class="item">-->
                    <!--<div class="item-wrapper">-->
                        <!--<div class="item-detail"><i class="iconfont icon-account-balance"></i>¥ {{effectiveInfo.balance.toFixed(2) || 0.00}}</div>-->
                    <!--</div>-->
                    <!--<div class="item-desc">账户余额</div>-->
                <!--</div>-->
                <div class="item">
                    <div class="item-wrapper">
                        <div class="item-detail" :class="{spend: from==0?true:false}"><i class="iconfont icon-casted"></i><em>¥</em> <span>{{effectiveInfo.spend.toFixed(2) || 0.00}}</span></div>
                    </div>
                    <div class="item-desc" v-show="from != 0">已花费</div>
                    <div class="item-desc" v-show="from == 0">已花费（{{showTime}}）</div>
                </div>
                <a href="https://www.facebook.com/ads/manager/billing/transactions" target="_blank">
                    <div class="btn_common_yellow btn_common_small btn-recharge" v-show="from != 0">
                        <span>充值</span>
                    </div>
                </a>
            </div>
        </div>
        <loading :showLoading="showLoadingProps"  v-show="showLoading" />
    </div>
</template>

<script>
    import {MANAGE_EFFECTIVE_INFO} from '../../../store/mutation-types/manager/index'
    import { isInteger } from '~/assets/js/global'
    import loading from '~/components/loading.vue';
    import { mapGetters } from 'Vuex'

    export default{
        data(){
            return {
                showLoading : false,
                showWarning: false,
                isSpend: false
            }
        },
        props:{
            'from': {
                default: 1
            },
            'showTime':{
            	default: '近七天'
            },

            'showLoadingProps' : {
                default: false
            }
        },
        methods: {
            getEffective() {
                if(this.showLoadingProps){
                    this.showLoading = true;
                }
                var dateFlag;
                if(this.from == 0){
                    dateFlag = 'LAST_7_DAYS'
                }else {
                    dateFlag = ''
                }
                this.$store.dispatch('getEffective',{dateFlag: dateFlag})
                    .then(response => {
                        if(this.showLoadingProps){
                            this.showLoading = false;
                        }
                        if(response.data.code == 1){
                            let result = response.data;
                            if(result && result.data){
                                this.showWarning = result.data.isPayInfo;
                                this.$store.commit('MANAGE_EFFECTIVE_INFO' , {managerEffectiveInfo : result.data || {}})
                            }
                        }
                    }).catch(()=>{
                        if(this.showLoadingProps){
                            this.showLoading = false;
                        }
                    })
            }
        },
        components: {
          loading
        },
        computed : {
            ...mapGetters({
                'effectiveInfo': 'getManagerEffectiveInfo'
            })
        },
        created() {
            this.getEffective();
        }
    }
</script>

<style scoped lang="scss">
    .container-wrapper {
        position: relative;
        max-width: 1200px;
        margin: 15px auto 0 auto;

        .account-wrapper {
            border: 1px solid #EAEEF0;
            border-radius: 4px;
            .warn-wrapper {
                height: 32px;
                background: #FFFAEA;
                border-radius: 4px 4px 0 0;
                .icon-remand {
                    margin: 0 5px 0 10px;
                }
                .warn-txt {
                    font-size: 12px;
                    color: #FFB100;
                    letter-spacing: 0;
                    line-height: 32px;
                    float: left;
                }
            }
            .account {
                height: 120px;
                background: #fff url('../../../assets/img/spend-bg.png') left bottom no-repeat;
                background-size: 50px 50px;
                border-radius:4px;
                .item {
                    float: left;
                    margin-top: 25px;
                    padding: 0 100px 0 40px;
                    height: 70px;
                    /*&:first-child {*/
                         /*border-right: 1px solid #EAEEF0;*/
                     /*}*/
                    .icon-account-balance , .icon-casted{
                        float: left;
                        color: #0686F9;
                        margin-right: 10px;
                        margin-top: 20px;
                        font-size:16px;
                    }
                    .item-wrapper {
                        float: left;
                        height: 40px;
                        padding-top: 15px;
                        .item-detail {
                            width: 100%;
                            float: left;
                            //font-family: MicrosoftYaHei-Bold;
                            font-size: 22px;
                            color: #333333;
                            letter-spacing: 0;
                            margin-bottom: 5px;
                            &.spend{
                                display:inline-block;
                                margin-top:-13px;
                                color:#ff3526;
                                em {
                                    margin-right: 10px;
                                    margin-top:-5px;
                                }
                                span{
                                    font-size:40px;
                                    display:inline-block;
                                    //vertical-align: middle;
                                }
                                .iconfont {
                                    margin-top: 20px !important;
                                }
                            }
                        }
                    }
                    .item-desc {
                        width: 100%;
                        font-size: 12px;
                        color: #999999;
                        margin-left: 30px;
                        display: inline-block;
                        letter-spacing: 0;
                    }
                }
                .btn-recharge{
                    float: left;
                    margin-top: 45px;
                    span {
                        color: #fff !important;
                    }
                }
                em {
                    margin-right: 7px;
                    font-style:normal;
                    display:inline-block;
                }
                .iconfont {
                    margin-top: 0px !important;
                }
            }
        }
    }
</style>